<html>
<body>
</body>
<script>
var canvas = document.createElement("canvas");
canvas.width = 550, canvas.height = 400;
canvas.style.border = "solid 1px";
document.body.appendChild(canvas);
ctx = canvas.getContext("2d");

function Ball(x, y, r, v, a, col)
{
	this.pos = new Vector(x||0, y||0)
	this.r = r||5;
	this.col = col||"#"+((Math.random()*0xffffff)>>0).toString(16);
	
	this.v = v||new Vector();
	this.a = a||new Vector();
	
	this.isOut = false;
}

Ball.prototype.render = function()
{
	ctx.save();
	ctx.translate(this.pos.x, this.pos.y);
	ctx.beginPath();
	ctx.fillStyle = this.col;
	ctx.arc(0, 0, this.r, 0, Math.PI*2);
	ctx.fill();
	ctx.restore();
}

Ball.prototype.update = function()
{
	this.pos.plus(this.v);
	this.v.plus(this.a)
	
	if(this.pos.y > 400 - this.r){
		this.pos.y = 400 - this.r;
		this.v.y *= -.7;
	}
	if(this.pos.x < -this.r || this.pos.x > 550 + this.r)
	{
		this.isOut = true;
	}
};

var balls = [];
function createBalls(n)
{
	var b,v,r;
	while(n--)
	{
		r = (Math.random()*5>>0) + 1
		v = new Vector(Math.random()*8 - 4, Math.random()*5);
		b = new Ball(275, 0, r, v, new Vector(0, Math.random()*.2 + .2));
		balls.push(b);
		b.col = "#ffffff";
	}
}


function update()
{
	var i,b;
	ctx.fillStyle = "rgba(0, 0, 0, .4)";
	ctx.fillRect(0, 0, 550, 400);
	
	createBalls(1);
	
	for(i = balls.length - 1;i >= 0;i --)
	{
		b = balls[i];
		b.update();
		b.render();
		
		if(b.isOut)
		{
			balls.splice(i, 1);
		}
	}
}


function Vector(x, y)
{
	this.x = x||0;
	this.y = y||0;
}

Vector.prototype.plus = function(v)
{
	this.x += v.x;
	this.y += v.y;
};

Vector.prototype.scale = function(s)
{
	this.x *= s;
	this.y *= s;
};

Vector.prototype.getLength = function()
{
	return Math.sqrt(this.x*this.x + this.y * this.y);
}
Vector.prototype.setLength = function(len)
{
	var l = this.getLength();
	if(!l)
	{
		this.x = len;
	}
	else
	{
		this.scale(len/this.getLength());
	}
};

Vector.prototype.getAngle = function()
{
	return Math.atan2(this.y, this.x);
}
Vector.prototype.setAngle = function(ang)
{
	var l = this.getLength();
	this.x = l * Math.cos(ang);
	this.y = l * Math.sin(ang);
};
setInterval(update, 1000/60);
</script>
</html>